<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登录页面</title>
    <style type="text/css">
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
        .main{
            width: 420px;
            margin: auto;
            margin-top: 120px;
        }
        .login_tit{
            width: 420px;
            color: #fff;
            text-align: center;
        }
        .login_tit>div{
            position: relative;
            font-size: 22px;
            font-weight: bold;
        }
        .login_tit>p{
            font-size: 14px;
            font-family: "楷体";
            margin:10px 0;
        }
        .tit-bg{
            position:absolute;
            top:50%;
            display: inline-block;
            width:90px;
            height:1px;
            background:url(resources/img/login_tit.png);
        }
        .tit-bg.left{
            left:0;
            transform:rotate(180deg)
        }
        .tit-bg.right{
            right:0
        }

        /*表单*/
        .formT{
            margin-top: 40px;
            text-align: center;
            width:350px;
            margin: 40px auto;
        }
        .p {
            margin: 10px 0;
            height: 44px;
            position: relative;
        }
        .p .login_txtbx{
            font-size: 14px;
            height: 26px;
            line-height: 26px;
            padding: 8px 9%;
            width: 81%;
            text-indent: 1em;
            border: 1px solid dimgray;
            background: rgba(0,0,0,.1);
            color: white;
        }
        /* 输入框默认显示字体颜色 */
        .login_txtbx::-webkit-input-placeholder {
            color:rgba(255,255,255,.9);
        }
        .p.user_icon:before {
            content: "u";
        }
        .p.psd_icon:before {
            content: "p";
        }
        .p:before {
            font-family: 'adminthemesregular';
            position: absolute;
            top: 0;
            left: 14px;
            height: 42px;
            line-height: 42px;
            font-size: 20px;
            color: #fff;
        }
        /* 输入框经过 */
        .login_txtbx:hover{
            -webkit-box-shadow: 0 0 6px #1d7eb8;
            transition-duration: 0.5s;
        }
        /* 输入框聚焦 */
        .login_txtbx:focus{
            color: white;
            outline: none !important;
            -webkit-box-shadow: 0 0 6px #1d7eb8;
        }
        .psd_icon{
            margin-top: 20px;
        }
        /* 登录按钮 */
        .signup{
            margin-top: 50px;
        }
        .gv {
            border: 0;
            background:url(resources/img/login_bt.png) repeat 0px 0px;
            width: 130px;
            height: 43px;
            text-align:center;
            line-height:43px;
            cursor:pointer;
            margin:8px 20px 8px 20px;
            font:18px/43px 'microsoft yahei';
            color:#066197;
            outline: 0;
        }
        .gv:hover {
            background: url(resources/img/login_bt.png) repeat 0px -43px;
            color:#1d7eb8;
            -webkit-box-shadow: 0 0 6px #1d7eb8;
            transition-duration: 0.5s;
        }
        /*记住密码之后样式改变*/
        input{
            background-color: transparent;
        }
        input:-webkit-autofill{
            -webkit-text-fill-color: #FFFFFF !important;
            background-color: transparent;
            background-image: none;
            -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
            transition: background-color 5000s ease-in-out;
        }
    </style>
</head>
<body>

    <img src="resources/img/login_bgi.gif" class="bg">
    <div class="main">
        <!-- 标题 -->
        <div class="login_tit">
            <div>
                <i class="tit-bg left"></i>
                <text style="font-size: 30px;font-family: '楷体';">超市管理系统</text>
                <i class="tit-bg right"></i>
            </div>
            <p style="">CHAO SHI GUAN LI XI TONG</p>
        </div>
        <!-- 表格 -->
        <form method="post" action="loginServlet" class="formT">
            <p class="p user_icon">
                <input type="text" name="UserName" placeholder="账号" class="login_txtbx">
            </p>
            <p class="p psd_icon">
                <input type="password" name="UserPassword" placeholder="密码" class="login_txtbx">
            </p>
            <div class="signup">
                <input type="submit" class="gv" value="登&nbsp;&nbsp;录" />
                <input type="reset" class="gv" value="清&nbsp;&nbsp;空" />
            </div>
        </form>
    </div>

</body>
</html>
